<template>
<layoutBlock>
  <autoMap class="mt40 my-map-control"  :mapInfo="mapInfo" :pointData="pointData" style="height:calc(100vh - 195px)">
    <div slot="control" class="" >
      <Select filterable v-model="condition.deviceModelCode" clearable placeholder="请选择设备型号" @on-change="changePoint">
        <Option v-for="item in modeList" :value="item.code" :key="item.id">{{ item.name }}</Option>
      </Select>
      <Select filterable v-model="condition.deviceStatus" clearable placeholder="请选择设备状态" @on-change="changePoint">
        <Option v-for="item in deviceStatus" :value="item.code" :key="item.code">{{ item.name }}</Option>
      </Select>
    </div>
  </autoMap>
</layoutBlock>
</template>

<script>
import autoMap from "../../components/Map/autoMap";
import tool from "@/libs/tool";
import {railList} from '@/api/position';
import base from '@/mixins/base';
import {deviceType} from '@/api/device';
export default {
  name: "index",
  mixins:[base],
  components:{autoMap},
  data(){
    return {
      mapInfo:[],//护栏地图落点的信息
      pointData:[],//设备落点
      pointDataCopy:[],
      modeList:[],
      condition:{
        deviceModelCode:'',
        deviceStatus:'',
      }
    }
  },
 async mounted() {
  await  this.getType()
   await this.getData();
  },
  methods:{
    async getType(){
      let res = await deviceType({});
      this.modeList= _.get(res,'data')||[];
    },
    changePoint(){
      this.pointData=this.pointDataCopy.filter(item=>{
        if(this.condition.deviceStatus==5){
          return ((!this.condition.deviceModelCode)||item.deviceModelCode==this.condition.deviceModelCode)&&
              (item.deviceStatus!==1)
        }
        return ((!this.condition.deviceModelCode)||item.deviceModelCode==this.condition.deviceModelCode)&&
            ((!this.condition.deviceStatus)||item.deviceStatus==this.condition.deviceStatus)
      })

    },
    async getData(){
      let res =!this.orgIds?{}:await railList({orgIds:this.orgIds});
      this.mapInfo=tool.fromatMapInfo(_.get(res,'data')||[]);
      this.pointData=tool.getPoints(_.get(res,'data')||[]);
      this.pointDataCopy=_.cloneDeep(this.pointData)
      // console.log(this.pointData,'this.pointData');
    },
  }
}
</script>

<style scoped lang="less">
/deep/.my-map-control{
  margin-top: 40px;
  .control{
    top:-45px;
    left:0;
  }

}
</style>
